/**
 * Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
 * Copyright (c) <spug.dev@gmail.com>
 * Released under the AGPL-3.0 License.
 */
import React,{Fragment} from 'react';
import { observer } from 'mobx-react';
import { Card, Row, Col, Pagination } from 'antd';
import store from "../../pages/generate/ordinary/Store";
import TableOperation from "./TableOperation";
import 'antd/dist/antd.css';
import '../../styles/vikoc.css';
const { Meta } = Card;

@observer
class ActionVikocCard extends React.Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

    // 处理多选数据行
    rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            store.selected_ids = selectedRowKeys;
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
    };

    //处理排序、分页
    onChange = (pagination, filters, sorter, extra) => {
        if (sorter.field){
            store.searchMap["sort"] = (sorter.order === "descend" ? "-" : "") + sorter.field;
        }
        store.page = pagination.current;
        store.pageSize = pagination.pageSize;
        store.fetchRecords();
    };

    render() {
        return (
            <div style={{ padding: '24px' }}>
                {/* 流式布局主体 */}
                <Row gutter={[24, 24]} type="flex">
                    {store.records.map(product => (
                        <Col
                            key={product.id}
                            xs={24}
                            sm={12}
                            md={8}
                            lg={6}
                            xl={4}
                        >
                            <Card
                                hoverable
                                cover={
                                    <img
                                        alt={product.name}
                                        src={product.img}
                                        style={{ height: 200, objectFit: 'cover' }}
                                    />
                                }
                            >
                                <div className="box-border overflow-hidden leading-1">
                                    <div className="overflow-hidden">
                                        <div className="flex flex-row overflow-hidden">
                                            <div className="flex flex-col w-[60%] overflow-hidden">
                                                <div
                                                    className="font-inter font-bold text-[#FF002C] truncate leading-1 text-[26px] mobile:text-base">
                                                    ${product.arn}
                                                </div>
                                                <div
                                                    className="font-inter font-medium text-black-600 truncate text-[12px]">Earn per sale
                                                </div>
                                            </div>
                                            <div className="flex flex-col w-[40%] overflow-hidden box-border">
                                                <div
                                                    className="font-inter font-bold text-[#FF002C] truncate leading-1 text-[26px] mobile:text-base">
                                                    {product.seller_commission_percent}%
                                                </div>
                                                <div
                                                    className="font-inter font-medium text-black-600 truncate text-[12px]">Commission
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        className="md:truncate mobile:line-clamp-2 mobile:overflow-hidden font-inter font-bold text-[#000] text-[12px] leading-[16px] mobile:min-h-[32px] mobile:mt-[7px] mt-[13px]">
                                        {product.name}
                                    </div>
                                    <div className="flex flex-row mt-[5px] leading-1">
                                        <div
                                            className="font-inter font-bold text-[12px] text-[#000] mobile:text-xs truncate">${product.price}
                                        </div>
                                        <div
                                            className="font-inter font-bold text-[12px] text-[#000] mobile:text-xs truncate">
                                        </div>
                                    </div>
                                    <div className="w-full flex justify-center mt-[10px]">
                                        <div>
                                            <div
                                                className="text-[12px] btnDefaultStyle___ymX4n bg-no-repeat rounded-full relative cursor-pointer">
                                                <div
                                                    className="absolute left-[4px] top-0 bottom-0 right-[4px] text-center flex items-center justify-center font-[500] rounded-full bg-[#000000] text-white">
                                                    <TableOperation info={product} config={store.hasPermissionAction}/>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </Card>
                        </Col>
                    ))}
                </Row>

                {/* 分页控件 */}
                <div style={{ textAlign: 'center', marginTop: 24 }}>
                    <Pagination
                        current={store.page}
                        pageSize={store.pageSize}
                        total={store.total}
                        onChange={this.onChange}
                        showQuickJumper
                        showTotal={total => `共 ${total} 件商品`}
                    />
                </div>
            </div>
        );
    }
}

export default ActionVikocCard
